<template>
	<view class="con">
		<!-- <view class="bg_balck"></view> -->
		<view class="topWrap">
			<view class="top flex flex_between">
				<view class="top1">
					<image class="top1_v1" :src="userInfo.lv_ico" mode="widthFix"></image>
					<view class="top1_v2">{{userInfo.nickName}}</view>
					<view class="top1_v3">尊贵的陌上未来{{userInfo.lv || ''}}{{userInfo.lv_name || ''}}</view>
				</view>
				<image class="top2" :src="userInfo.avatarUrl" mode="widthFix"></image>
			</view>
			<view class="zhen flex flex_between">
				<view class="zhen_z">
					<view class="zhen_z1">
						<view class="zhen_z1c"><text :style="{width:userInfo.zhitui_plan*100+'%'}"></text></view>
						<view class="zhen_z2">直推有效粉丝≥{{userInfo.zhitui_over || 0}}人</view>
					</view>
					<view class="zhen_z1">
						<view class="zhen_z1c"><text :style="{width:userInfo.leji_plan*100+'%'}"></text></view>
						<view class="zhen_z2">累计个人收益≥{{userInfo.leji_over || 0}}元</view>
					</view>
				</view>
				<view class="zhen_y" @click="goInvite">去邀请</view>
			</view>
		</view>
		<view class="quany">
      <view class="quany_t">您已享有的权益</view>
      <view class="quany_c flex flex_between">
        <view class="quany_cli flex">个人收益提升至<text>{{userInfo.fenyong}}</text></view>
        <view class="quany_cli flex">团队津贴提升至<text>{{userInfo.fenyong_team}}</text></view>
      </view>
    </view>
    <view class="xiam">
      <view class="quany_t">晋升条件及规则</view>
      <view class="lisy">
        <view class="lisyli" v-for="(item,index) in arrlv_if" :key="index">
          <view class="lisyli_t flex">
            <view class="lisyli_tz"></view>
            <view class="lisyli_ty weight">{{item.title}}</view>
          </view>
          <view class="lisyli_b flex">
            <view class="lisyli_bz" :class="index<arrlv_if.length-1?'':'nobg'"></view>
            <view class="lisyli_by">{{item.desc}}</view>
          </view>
        </view>
      </view>
    </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: uni.getStorageSync('userInfo'), //授权后的信息
        arrlv_if:[] //重组数据
			};
		},
    onLoad() {
      // console.log('用户信息')
      // console.log(this.userInfo)
      // let lv_if = this.userInfo.lv_if
      // // 对象转数组
      // let arr = Object.values(lv_if)
      // this.arrlv_if = arr
      // console.log(arr)
    },
    onShow() {
      console.log('用户信息')
      console.log(this.userInfo)
      let lv_if = this.userInfo.lv_if
      // 对象转数组
      let arr = Object.values(lv_if)
      this.arrlv_if = arr
      console.log(arr)
    },
    methods:{
      goInvite() {
        if (this.isLogin === 1) {
          uni.showToast({
            icon: 'none',
            title: '未登录，先进行授权登录'
          })
        } else {
          uni.navigateTo({
            url: '/packageA/mine/invite'
          })
        }
      },
    }
	}
</script>

<style lang="scss">
	.topWrap{
		width: 100%;
		height: auto;
		background-color: rgba(255,255,255,1);
		color: rgba(16,16,16,1);
		border-radius: 20rpx;
		padding: 40rpx 30rpx;
		position: relative;
		z-index: 1;
		box-sizing: border-box;
		.top{
			width: 100%;
			height: auto;
			margin-bottom: 24rpx;
			.top1{
				width: auto;
				height: auto;
				.top1_v1{
					width: 120rpx;
					height: auto;
					margin-bottom: 24rpx;
					display: block;
          border-radius: 40rpx;
				}
				.top1_v2{
					line-height: 56rpx;
					color: rgba(16,16,16,1);
					font-size: 40rpx;
					margin-bottom: 4rpx;
          font-weight: bold;
				}
				.top1_v3{
					line-height: 40rpx;
					color: rgba(16,16,16,1);
					font-size: 28rpx;
				}
			}
			.top2{
				width: 130rpx;
				height: auto;
				border-radius: 100%;
			}
		}
		.zhen{
			width: 100%;
			height: auto;
			align-items: normal;
			.zhen_z{
				width: 460rpx;
				height: auto;
				.zhen_z1{
					width: 100%;
					height: auto;
					margin-bottom: 24rpx;
					.zhen_z1c{
						width: 100%;
						height: 16rpx;
						border-radius: 20rpx;
						background-color: rgba(232,230,230,1);
						position: relative;
						margin-bottom: 10rpx;
            overflow: hidden;
						text{
							display: block;
							width: 0;
							border-radius: 20rpx;
							background-color: rgba(249,191,65,1);
							position: absolute;
							height: 16rpx;
							left: 0;
							top:0;
						}
					}
				}
        .zhen_z1:last-child{
          margin-bottom: 0;
        }
				.zhen_z2{
					line-height: 34rpx;
					color: rgba(137,137,137,1);
					font-size: 24rpx;
				}
			}
			.zhen_y{
				width: 160rpx;
				height: 44rpx;
				line-height: 44rpx;
				border-radius: 40rpx;
				background-color: rgba(249,191,65,1);
				color: rgba(16,16,16,1);
				color: rgba(0,0,0,1);
				font-size: 24rpx;
				text-align: center;
			}
		}
	}
  .quany{
    width: 100%;
    border-radius: 20rpx;
    background-color: rgba(255,255,255,1);
    color: rgba(16,16,16,1);
    height: auto;
    padding: 30rpx;
    box-sizing: border-box;
    margin-top: 20rpx;
    .quany_c{
      width: 100%;
      height: auto;
      .quany_cli{
        width: 310rpx;
        height: 112rpx;
        line-height: 112rpx;
        border-radius: 10rpx;
        background-color: rgba(255,246,228,1);
        color: rgba(0,0,0,1);
        font-size: 28rpx;
        text-align: center;
        justify-content: center;
        text{
          color: rgba(249,191,65,1);
          font-size: 40rpx;
          font-family: 'AvantGardeFont';
          margin-left: 4rpx;
        }
      }
    }
  }
  .quany_t{
    line-height: 40rpx;
    color: rgba(0,0,0,1);
    font-size: 28rpx;
    margin-bottom: 20rpx;
    font-weight: bold;
  }
  .xiam{
    margin-top: 60rpx;
    padding: 0 30rpx;
    width: 100%;
    box-sizing: border-box;
    .lisy{
      width: 100%;
      height: auto;
      .lisyli{
        width: 100%;
        height: auto;
        .lisyli_t{
          width: 100%;
          height: auto;
          margin-bottom: 8rpx;
          .lisyli_tz{
            width: 16rpx;
            height: 16rpx;
            border-radius: 100%;
            background-color: rgba(0,0,0,1);
            margin-right: 16rpx;
          }
          .lisyli_ty{
            color: rgba(16,16,16,1);
            font-size: 28rpx;
          }
          .lisyli_ty.weight{
            font-weight: bold;
          }
        }
        .lisyli_b{
          width: 100%;
          height: auto;
          align-items: normal;
          .lisyli_bz{
            width: 4rpx;
            height: 60rpx;
            background-color: rgba(187,187,187,1);
            margin-left: 7rpx;
            margin-right: 22rpx;
          }
          .lisyli_bz.nobg{
            background: transparent;
          }
          .lisyli_by{
            color: rgba(137,137,137,1);
            font-size: 24rpx;
          }
        }
      }
    }
  }
</style>
